<template>

  <div class="demo-inner-divider">基本用法</div>
  <div class="block">
    <span class="demonstration">默认 Hover 指示器触发</span>
    <e-carousel height="150px" ref="carouselRef">
      <e-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </e-carousel-item>
    </e-carousel>
  </div>
  <div class="block">
    <span class="demonstration">Click 指示器触发</span>
    <e-carousel trigger="click" height="150px">
      <e-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </e-carousel-item>
    </e-carousel>
  </div>

  
  <div class="demo-inner-divider">可以将指示器的显示位置设置在容器外部</div>
  <p>indicator-position属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为outside则会显示在外部；设置为none则不会显示指示器。</p>
  <e-carousel indicator-position="outside">
    <e-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </e-carousel-item>
  </e-carousel>

  <div class="demo-inner-divider">可以设置切换箭头的显示时机</div>
  <e-carousel :interval="5000" arrow="always">
    <e-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </e-carousel-item>
  </e-carousel>
  <div class="demo-inner-divider">当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格</div>
  <e-carousel :interval="4000" type="card" height="200px">
    <e-carousel-item v-for="item in 6" :key="item">
      <h3 class="medium">{{ item }}</h3>
    </e-carousel-item>
  </e-carousel>
  <div class="demo-inner-divider">默认情况下，direction 为 horizontal。通过设置 direction 为 vertical 来让走马灯在垂直方向上显示。</div>
  <e-carousel height="200px" direction="vertical" :autoplay="false">
    <e-carousel-item v-for="item in 4" :key="item">
      <h3 class="medium">{{ item }}</h3>
    </e-carousel-item>
  </e-carousel>


  <div class="demo-inner-divider">数字显示器</div>
  <p>走马灯，指示器显示数字，仅在,indicator：true，direction：horizontal可以使用</p>
  <e-carousel showNumber>
    <e-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </e-carousel-item>
  </e-carousel>

  <div class="demo-inner-divider">carousel事件</div>

  <e-button @click="prev">手动切换上一页</e-button>
  <e-button @click="next">手动切换下一页</e-button>
  <e-button @click="setActiveItem">手动切换到第3页</e-button>
  <e-carousel height="150px" :loop="true" ref="carouselRef" @on-change="change">
    <e-carousel-item v-for="item in 4" :key="item">
      <h3 class="small">{{ item }}</h3>
    </e-carousel-item>
  </e-carousel>
  <!-- API说明 -->
  <carousel-md class="markdown-body"></carousel-md>
</template>
<script setup>
import carouselMd from '../../docs/carousel.md'

import {ref} from 'vue'

const carouselRef=ref();

const change=(val,oldVal)=>{
  console.log('val,oldVal',val,oldVal)
}

const prev=()=>{
  carouselRef.value.prev()
}

const next=()=>{
  carouselRef.value.next()
}

const setActiveItem=()=>{
  carouselRef.value.setActiveItem(2)
}
</script>
<style>
.haloe-carousel-list {
  background-color: #333;
}
.demo-carousel {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.block {
  padding: 30px;
  text-align: center;
  border-right: 1px solid #eff2f6;
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
.haloe-carousel-item h3 {
  color: #fff;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.haloe-carousel-item {
  background-color: #333333;
  /* height: 200px; */
    /* line-height: 200px; */
    text-align: center;
    color: #fff;
    font-size: 20px;
    /* background: #506b9e; */
}

/* .haloe-carousel-item:nth-child(2n + 1) {
  background-color: #d3dce6;
} */
</style>
